<template>
  <div class="home_marke" :class="{ pd_10: isMobile(), home_main_m: !isMobile() }">
    <ITitle :title="'赋能汽车新媒体全链路管理'" label="产品矩阵" :borderVail="false"></ITitle>
    <div :class="{ flex_left_right: !isMobile() }" style="align-items: stretch">
      <div class="flex_right marke_left wrapper_content" style="justify-content: right">
        <div class="marke_main" :class="{ marke_main_m: isMobile() }">
          <div v-for="(item, index) in dataList" class="marke_row m_t_10 m_b_10 cup" @click="active = index" @mouseover="active = index">
            <MarkeCol :title="item.title" :icon="item.icon" v-if="active != index"></MarkeCol>
            <MarkeColCard v-else :key="index" :title="item.title" :icon="item.icon" :dataList="item.dataList"></MarkeColCard>
          </div>
        </div>
      </div>
      <div class="flex_right">
        <Transition name="fade_img" mode="out-in">
          <img :src="getImageUrl(dataList[active].img)" :key="active" class="marke_img"
        /></Transition>
        <img :src="getImageUrl(item.img)" v-for="(item, index) in dataList" :key="index" style="display: none" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  interface MarkeDataInterface {
    id: number
    title: string
    type: string
    icon: string
    dataList?: string[]
    img: string
  }
  import { getImageUrl } from '@/utils'
  import { defineAsyncComponent, ref } from 'vue'
  import { isMobile } from '@/utils'
  // const IWrapper = defineAsyncComponent(() => import('./comm/IWrapper.vue'))
  const MarkeColCard = defineAsyncComponent(() => import('@/components/comm/MarkeColCard.vue'))
  const MarkeCol = defineAsyncComponent(() => import('@/components/comm/MarkeCol.vue'))
  const ITitle = defineAsyncComponent(() => import('@/components/comm/ITitle.vue'))
  const active = ref(0)
  const dataList = ref<MarkeDataInterface[]>([
    {
      id: 1,
      title: '自研留资组件',
      type: 'text',
      icon: 'marke_group_1',
      img: 'marke_0',
      dataList: ['支持手机号、城市、昵称授权后一键获取', '打通官方组件、抖音小风车、视频号等线索实时抓取'],
    },
    {
      id: 2,
      img: 'marke_1',
      title: '新媒体矩阵管理平台',
      type: 'card',
      icon: 'marke_group_2',
      dataList: ['跨平台账号管理', '多维度数据分析', 'AI类工具降本增效AI私信智能回复、AI数字人直播、AI直播复盘'],
    },
    {
      id: 3,
      img: 'marke_2',
      title: '达人/短视频切片系统',
      type: 'text',
      icon: 'marke_group_3',
      dataList: ['视频大批量混剪、单人可产出3000条', '高级剪辑师常态化模版制作更新', '混剪视频镜头精准匹配文案'],
    },
    {
      id: 4,
      img: 'marke_3',
      title: '数据分析复盘',
      type: 'text',
      icon: 'marke_group_4',
      dataList: ['多场景、多角色驾驶舱', '多维度、多指标趋势分析', '数据实时呈现，辅助业务决策'],
    },
  ])
</script>
<style scoped lang="less">
  .home_marke {
    .marke_main {
      margin-left: auto;
      margin-right: 70px;
      width: 70%;
    }
    .marke_main_m {
      margin: 0;
      width: 100%;
    }
    .marke_row {
    }
  }
 
  /* 淡入淡出过渡 */
  .fade_img-enter-active,
  .fade_img-leave-active {
    transition: opacity 0.5s ease;
  }
  .fade_img-enter-from,
  .fade_img-leave-to {
    opacity: 0;
  }
</style>
